<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="人工解读"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-20">
					<view class="box-supplement pb-20 mb-20">
						<view class="title flex justify-center items-center">
							<text>请认真填写您的问题</text>
						</view>
						<view>
							<uni-easyinput class="bg-white pl-20" type="textarea" v-model="postFrom.describe" :inputBorder="false"
								placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
						</view>
					</view>
					<view class="box-supplement mb-20">
						<view class="title flex justify-center items-center">
							<text>请选择您的基本信息</text>
						</view>
						<view class="box-module p-20 py-30 mb-20 flex">
							<view class="box-year flex items-center flex-1">
								<view class="label flex-1 text-center">出生年份</view>
								<picker-view v-if="true" :value="yearIdx" @change="bindYearChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}</view>
									</picker-view-column>
								</picker-view>
							</view>
							<!-- <view class="box-birthday flex items-center mb-20"> -->
							<view class="box-year flex items-center flex-1">
								<view class="label flex-1 px-20 text-center">生肖</view>
								<picker-view v-if="true" :value="zodiacIdx" @change="bindBirthdayChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in zodiacList" :key="index">{{item}}</view>
									</picker-view-column>
								</picker-view>
							</view>
							<!-- <view class="box-gender flex items-center"> -->
							<view class="box-year flex items-center flex-1">
								<view class="label flex-1 px-20 text-center">性别</view>
								<picker-view v-if="true" :value="genderIdx" @change="bindGenderChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in genderList" :key="index">{{item}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
					</view>
					<view class="box-tips">
						<text>在我们继续下一步之前，请放空您的思想，什么都不要想，尽量让自己的心情平和下来，放松，放空，什么都不要想，明镜止水，无欲无求，深呼吸。</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-20">
			<view class="btn-next flex justify-center" @click="handleNext">
				<text>下一步</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		replenishment: "", // 补充说明
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 1, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: 0, // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
	})
	const selcard = ref("") // 星图档案ID字符串
	const starsts = ref("") // 单人星图/双人星图
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const addparme = ref([]) // 不适感
	const supplement = ref(false) // 补充信息
	systemSetting.value = uni.getStorageSync('dict');

	const year = ref(2000)
	const yearIdx = ref([60])
	const gender = ref("女")
	const genderIdx = ref([1])
	const zodiac = ref("马")
	const zodiacIdx = ref([6])
	const yearList = ref([])

	const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
	const genderList = ['男', '女']

	onLoad((option) => {
		postFrom.value.describe = option.describe
		bbsplateId.value = option.bbsplateId
		posts.value = option.posts
		for (let i = 1940; i <= 2007; i++) {
			yearList.value.push(i)
		}
		getTypeList()
	})

	const handleChoose = (item) => {
		if (addparme.value.indexOf(item.value) == -1) {
			addparme.value.push(item.value)
		} else {
			let idx = addparme.value.indexOf(item.value)
			addparme.value.splice(idx, 1)
		}
	}
	const handleNext = () => {
		uni.navigateTo({
			url: `/pages/test/tarot?id=1382936177731960832&dsts=1&ask=${postFrom.value.describe}&bbsplateId=${bbsplateId.value}&posts=${posts.value}&year=${year.value}&zodiac=${zodiac.value}&gender=${gender.value}`
		})
	}

	const bindYearChange = (e) => {
		yearIdx.value = e.detail.value
		year.value = yearList.value[yearIdx.value[0]]
	}
	const bindBirthdayChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value[0]]
	}
	const bindGenderChange = (e) => {
		genderIdx.value = e.detail.value
		gender.value = genderList[genderIdx.value[0]]
	}
	const onPlay = (type) => {
		if (postFrom.value.describe == '') {
			uni.showToast({
				icon: "none",
				title: "请填写您的问题！"
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": bbsplateId.value,
			...postFrom.value,
			paysts: type,
			selcard: selcard.value,
			problem: `${year.value},${zodiac.value},${gender.value}`,
			posts: posts.value,
			addparme: addparme.value.join(',')
		}
		console.log(params)
		// popupShow.value = true
		// return
		communityApi.generatePoss(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: '测试成功'
				})
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/tabbar/user`
					})
				}, 1000)
			} else {
				popupShow.value = true
			}
		})
	}
	const handleChange = (val) => {
		if (val == 1) {
			pickerRef.value.show()
		} else {
			uni.$on('chooseNum', (arr) => {
				console.log(arr)
				postFrom.value.selcard = arr.join(',')
			})
			uni.navigateTo({
				url: `/pages/views/chooseNum?num=3`
			})
		}
	}
	const handleChooseStart = () => {
		uni.$once('choose', (chooses) => {
			console.log(chooses)
			postFrom.value.selcard = chooses.join(',')
			postFrom.value.starsts = chooses.length == 2 ? 1 : 0
			console.log(postFrom.value)
		})
		uni.navigateTo({
			url: `/pages/views/starChart`
		})
	}
	const setbBsplateId = (val) => {
		bbsplateId.value = val.id
		bbsplate.value = val
		if (val.btp == 1) {
			// 心理专区
			posts.value = 1
		}
		if (val.btp == 2) {
			// 星图区
			posts.value = 2
		}
		if (val.btp == 3) {
			// 卡牌区
			posts.value = 3
			pickerRef.value.show()
		}
	}
	const getTypeList = () => {
		testApi.getCardtpyelistAndson().then(res => {
			res.data.map(item => {
				item.level = 1
			})
			formatData(res.data)
			items.value = res.data
		})
	}
	const formatData = (data) => {
		data.map(item => {
			item.children = item.sonlist || item.dlist
			if (item.sonlist) {
				formatData(item.sonlist)
			}
			if (item.dlist) {
				formatData(item.dlist)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.box-problem {
		background: linear-gradient(180deg, #D3EFFF 0%, #DDF2FF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		// border: 2rpx solid;
		// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

		.bg_part {
			background: url(/static/test/bg_part.png) left top no-repeat;
			background-size: contain;
		}

		.bg_content {
			background: rgba(255, 255, 255, 0.4);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 32rpx;

			.text-checkbox {
				font-weight: 400;
				font-size: 26rpx;
				color: #273A3F;
				line-height: 36rpx;
			}
		}

		.desc {
			color: #B7CDDB;
		}
	}

	.box-supplement {
		background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		overflow: hidden;

		.title {
			position: relative;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2043;
			line-height: 56rpx;
			background: url(/static/test/bg_title.png) no-repeat;
			background-size: cover;

			.box-choose {
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}
		}

		.box-desc {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding: 28rpx 40rpx;
		}
	}

	.box-tips {
		background: url(/static/test/bg_tips2.png) no-repeat;
		background-size: cover;
		height: 393rpx;
		padding: 40rpx 66rpx 0;
		font-weight: 400;
		font-size: 32rpx;
		color: #23360C;
		line-height: 56rpx;
		margin: 0 -20rpx;
	}

	.box-module {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.picker-view {
			width: 96rpx;
			height: 140rpx;
		}

		.item {
			font-size: 24rpx;
			line-height: 58rpx;
			text-align: center;
		}

		.box-year {
			font-weight: 500;
			font-size: 24rpx;
			color: #4370C1;

			.label {
				background: #E3EDFF;
				// border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #B4CCF7;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				// border-radius: 8rpx;
				// border: 2rpx solid #B4CCF7;
			}

			.item {
				background: #E3EDFF;
				border: 2rpx solid #B4CCF7;
			}
		}

		.box-birthday {
			font-weight: 500;
			font-size: 30rpx;
			color: #634A97;

			.label {
				background: #F2ECFF;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #E2D4FF;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E2D4FF;
			}

			.item {
				background: #F2ECFF;
				border: 2rpx solid #E2D4FF;
			}
		}

		.box-gender {
			font-weight: 500;
			font-size: 30rpx;
			color: #C3743B;

			.label {
				background: #FFE7D6;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #FFD8BB;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #FFD8BB;
			}

			.item {
				background: #FFE7D6;
				border: 2rpx solid #FFD8BB;
			}
		}
	}

	.btn-next {
		background: url(/static/test/bg_btn_blue.png) no-repeat;
		background-size: cover;
		height: 104rpx;

		text {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 24rpx;
		}
	}
</style>